<template>
  <div class="banner-carousel">
    <div class="container-fluid">
      <!-- 
        <swiper class="banner-swiper">
        <template v-for="i in 4" :key="i">
          <swiper-slide>
            <img src="http://demo.mxyhn.xyz:8020/cssthemes6/bart_5_ArchiPlus/assets/img/home-slider.png" class="" />
          </swiper-slide>
        </template>
      </swiper> 
      -->
      <!--  -->
      <div class="swiper banner-swiper">
        <div class="swiper-wrapper">
          <template v-for="(item, index) in bannerList" :key="index">
            <div class="swiper-slide" style="max-height: 700px">
              <img
                :src="
                  $getImgUrlFromMediaById(item.featured_image_src.full)
                    ? $getImgUrlFromMediaById(item.featured_image_src.full)
                    : require('@/assets/image/banner-default.png')
                "
                class="w-100 h-100"
              />
              <!-- <div style="width: 100%; height: 500px"></div> -->
            </div>
          </template>
        </div>
        <!-- <div class="swiper-pagination"></div> -->
        <div class="swiper-button-prev">
          <div class="swiper-button-box">
            <i class="fa fa-angle-left" aria-hidden="true"></i>
          </div>
        </div>
        <div class="swiper-button-next">
          <div class="swiper-button-box">
            <i class="fa fa-angle-right" aria-hidden="true"></i>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
import Swiper, {
  Navigation,
  Pagination,
  Scrollbar,
  Controller,
  Autoplay,
} from "swiper";
// import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
// https://blog.csdn.net/weixin_42063951/article/details/121354984
// https://blog.csdn.net/yunchong_zhao/article/details/120970625
// Import Swiper styles
import "swiper/css";
// import "swiper/css/navigation";
// import "swiper/css/pagination";
// import "swiper/css/controller";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {
    bannerList: {
      type: Array,
      required: true,
    },
  },
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      swiperOptions: {
        slidesPerView: 1,
        modules: [Navigation, Pagination, Controller, Autoplay],
        loop: true, //循环播放
        autoplay: { delay: 3000, disableOnInteraction: false },
        speed: 500,
        // centeredSlides: true, //设置slide居中
        spaceBetween: 0,
        navigation: {
          nextEl: ".banner-carousel .swiper-button-next",
          prevEl: ".banner-carousel .swiper-button-prev",
        },
        pagination: {
          el: ".banner-carousel .swiper-pagination",
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
        },
        observer: true,
        observeParents: true,
      },
    });

    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      //   var bannerSwiper = useSwiper(".banner-swiper", data.swiper_options);
      Swiper.use([Navigation, Pagination]); // 使用需要的功能
      const bannerSwiper = new Swiper(".banner-swiper", data.swiperOptions);
    });
    return {
      ...refData,
    };
  },
};
</script>
<style lang="scss" scoped>
.banner-carousel {
  .container-fluid {
    padding-right: var(--bs-gutter-x, 0);
    padding-left: var(--bs-gutter-x, 0);
  }

  .banner-swiper {
    ::v-deep .swiper-pagination {
      position: absolute;
      bottom: 5%;
      left: 50%;
      z-index: inherit;

      .my-bullet {
        border-radius: 50%;
        margin: 4px;
        background: rgba(255, 255, 255, 0.5);
        width: 1rem;
        height: 0.14rem;
        display: inline-block;
        transition: width 0.3s;
        cursor: pointer;
      }

      .my-bullet-active {
        display: inline-block;
        background-color: #28a7e1;
        width: 1rem;
        height: 0.14rem;
        border-radius: 4px;
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      color: #fff;
      z-index: inherit;
    }

    .swiper-button-box {
      color: #23282d;
      background: #fff;
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 100%;
      font-size: 2rem;
      display: flex;
      /* vertical-align: middle; */
      align-items: center;
      justify-content: center;
    }

    .swiper-button-prev {
      position: absolute;
      top: 50%;
      left: 10%;
    }

    .swiper-button-next {
      position: absolute;
      top: 50%;
      right: 10%;
    }
  }
}
</style>
